echarts中自定义图片的矢量路径设置
在echarts象形柱图中要使用自定义的图片有三种格式，如下图：
前面两种方式我们项目中也常用到，第三种是矢量路径，如何获取这个矢量路径呢，方法如下：
第一步：下载svg格式的矢量图片
第二步：用Notepad++或记事本等可以编辑代码的工具打开该图片
第三步：将
标签中的b属性值复制出来，组成如上图中所示个格式数据即可
在echarts中可以使用自定义图标的地方都可以用矢量图，比如象形柱图中的自定义图标symbol，地图中的特效图形标记symbol等，以下代码示例的是象形柱图
示例： 下载一张小汽车的图片  打开文件  组成所需要的矢量路径  把图片引入到echarts象形柱图中，运行结果：  代码如下：
象形柱图
$(function(){
var itemData=["北京","上海","广州","重庆","武汉"];
var valData=[11289,12387,15987,9876,10289];
iniPictorialBar("chart",itemData,valData);
});
function iniPictorialBar(id,itemData,valData){
var spirit = 'path://M874.666667 469.333333c17.28 42.666667 42.666667 85.333333 42.666666 128v213.333334c0 27.946667-23.893333 42.666667-64 42.666666s-64-17.28-64-42.666666v-42.666667H234.666667v42.666667c0 25.386667-23.893333 42.666667-64 42.666666s-64-14.72-64-42.666666V597.333333c0-42.666667 25.386667-85.333333 42.666666-128s-64-37.333333-64-64 5.333333-42.666667 42.666667-42.666666h64s30.293333-87.04 42.666667-128 64-64 106.666666-64h341.333334c42.666667 0 94.293333 23.04 106.666666 64s42.666667 128 42.666667 128h64c37.333333 0 42.666667 16 42.666667 42.666666s-81.28 21.333333-64 64z m-469.333334 149.333334a21.333333 21.333333 0 0 0 21.333334 21.333333h170.666666a21.333333 21.333333 0 0 0 21.333334-21.333333v-21.333334a21.333333 21.333333 0 0 0-21.333334-21.333333h-170.666666a21.333333 21.333333 0 0 0-21.333334 21.333333v21.333334zM192 618.666667a64 64 0 1 0 64-64 64 64 0 0 0-64 64z m597.333333-256c0-21.333333-42.666667-106.666667-42.666666-106.666667H277.333333s-42.666667 85.333333-42.666666 106.666667v21.333333a42.666667 42.666667 0 0 0 42.666666 42.666667h469.333334a42.666667 42.666667 0 0 0 42.666666-42.666667v-21.333333z m-21.333333 192a64 64 0 1 0 64 64 64 64 0 0 0-64-64z';
var itemFontsize=16;
var lableSize = 16;
var gridLeft = 80;
var gridRight = 100;
var symbolSize = [25, 20];
var symbolColor = ["#0DAC5D"];
var fontColor='#197346';
var max = 0;
for(var i=0;imax){
max = valData[i];
}
}
max = max*1.2;
var height = $("#"+id).height();
var maxData = max;
var myChart = echarts.init(document.getElementById(id));
var option = {
tooltip: {
show:false
},
xAxis: {
max: maxData,
splitLine: {show: false},
offset: 10,
axisLine: {
show:false,
lineStyle: {
color: fontColor
}
},
axisTick: {show: false},
axisLabel: {show:false}
},
yAxis: {
data: itemData,
inverse: true,
axisTick: {show: false},
axisLine: {show: false},
axisLabel: {
margin: 20,
textStyle: {
color: fontColor,
fontSize: itemFontsize,
fontFamily:'Microsoft YaHei',
fontWeight:600
}
}
},
grid: {
top: 'center',
height:height,
left: gridLeft,
right: gridRight
},
series: [{
type: 'pictorialBar',
symbol: spirit,
symbolRepeat: 'fixed',
symbolMargin: '10%',
symbolClip: true,
symbolSize: symbolSize,
symbolBoundingData: maxData,
color:symbolColor,
data: valData,
z: 10
}, {
type: 'pictorialBar',
color:symbolColor,
itemStyle: {
normal: {
opacity: 0.2
}
},
label: {
normal: {
show: true,
formatter: '{c}',
position: 'right',
align:'right',
offset: [gridRight-30, 0],
textStyle: {
color: fontColor,
fontSize: lableSize,
fontFamily:'Microsoft YaHei'
}
}
},
animationDuration: 0,
symbolRepeat: 'fixed',
symbolMargin: '10%',
symbol: spirit,
symbolSize: symbolSize,
symbolBoundingData: maxData,
data: valData,
z: 5
}]
};
myChart.setOption(option);
}
|